<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>

    <style>
        .button {
            position: fixed;
            top: 150px;
            left: 950px;
        }

        .button div {
            height: 25px;
            line-height: 25px;
            width: 50px;
            text-align: center;
            background-color: #5bc0de;
            margin: 20px 0;
            color: white;
        }

        h2 {
            text-align: center;
        }

        .R{
            fill:#3498db ;
        }
        .L{
            fill: #e74c3c;
        }
        .B{
            fill: #e67e22;
        }
    </style>

    <script>
        function draw(data) {
            let margin = 75,
                width = 1000 - margin,
                height = 580 - margin;

            // 标题
            d3.select("body")
                .append("h2")
                .text("棒球球手自身特征与其全垒得分的关系")

            let svg = d3.select("body")
                .append("svg")
                .attr("width", width + margin)
                .attr("height", height + margin)

            // 画点
            svg.append('g')
                .attr('class', 'chart');

            // 坐标轴
            let height_extent = d3.extent(data, (d) => d['height'])
            let weight_extent = d3.extent(data, (d) => d['weight'])
            let avg_extent = d3.extent(data, (d) => d['avg'])
            let HR_extent = d3.extent(data, (d) => d['HR'])

            let height_scale = d3.scale.linear().domain(height_extent).range([height, margin])
            let weight_scale = d3.scale.linear().domain(weight_extent).range([margin, width])
            let avg_scale = d3.scale.sqrt().domain(avg_extent).range([2, 5])
            let HR_scale = d3.scale.sqrt().domain(HR_extent).range([2, 5])

            let weight_axis = d3.svg.axis().scale(weight_scale)
                .orient('bottom')
            let height_axis = d3.svg.axis().scale(height_scale)
                .orient('left')

            svg.append('g')
                .attr('class', 'x axis')
                .attr('transform', 'translate(0,' + height + ')')
                .call(weight_axis)
            svg.append('g')
                .attr('class', 'y axis')
                .attr('transform', 'translate(' + margin + ',0)')
                .call(height_axis)

            let weight_axis_name = svg.append('g').attr('class', 'axis_name x_name')
                .attr('transform', 'translate(' + (20 + width) + ',' + (height + 8) + ')')
                .append('text')
                .text('体重/磅')

            let height_axis_name = svg.append('g').attr('class', 'axis_name y_name')
                .attr('transform', 'translate(' + (20 + margin) + ',' + (margin + 8) + ')')
                .append('text')
                .text('身高/英寸')

            // 坐标点
            svg.append('g').attr('class', 'point')
                .selectAll('circle').data(data, (d) => d['name']).enter()
                .append('circle')
                .attr('cx', (d) => weight_scale(d['weight']))
                .attr('cy', (d) => height_scale(d['height']))
                .attr('r', (d) => HR_scale(d['HR']))
                .attr('class',function (d) {
                    return d['handedness']
                })
                .style('opacity', 0.25)


            let updata = function (hand) {
                let filtered_data
                if (hand === 'ALL') {
                    filtered_data = data
                } else {
                    filtered_data = data.filter((d) => d['handedness'] === hand);
                }

                svg.selectAll('circle').data(filtered_data, (d) => d['name']).exit().remove()
                svg.selectAll('circle').data(filtered_data, (d) => d['name']).enter().append('circle')
                    .attr('cx', (d) => weight_scale(d['weight']))
                    .attr('cy', (d) => height_scale(d['height']))
                    .attr('r', (d) => HR_scale(d['HR']))
                    .attr('class',function (d) {
                        return d['handedness']
                    })
                    .style('opacity', 0.4)
            }

            // 按钮
            let handedness = ['ALL', 'R', 'L', 'B']
            let buttons = d3.select('body').append('div').attr('class', 'button')
                .selectAll('div').data(handedness).enter()
                .append('div')
                .text((d) => d)
                .on('click', function (d) {
                    updata(d)
                })

        }


    </script>
</head>
<body>
<script type="text/javascript">
    /*
      Use D3 (not dimple.js) to load the TSV file
      and pass the contents of it to the draw function
      */

    d3.csv("baseball_data.csv", draw);
</script>
</body>
</html>
